<template>
	<view class="page">
		<view class="inbox2">
			<view class="inbox dx">
				<view class="ipt">开户行</view>
				<view class="ipt">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" style="width:400rpx;">{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="inbox dx">
				<view class="ipt">开户名</view>
				<view class="ipt">
					<input class="srk" type="text" v-model="bankAccName" value="" placeholder="请输入开户名" />
				</view>
			</view>
			<view class="inbox">
				<view class="ipt">银行卡号</view>
				<view class="ipt">
					<input class="srk" type="text" v-model="acctNo" value="" placeholder="输入银行卡号" />
				</view>
			</view>
		</view>
		<view class="inbox2">
			<view class="inbox dx">
				<view class="ipt">身份证号</view>
				<view class="ipt">
					<input class="srk" type="text" v-model="cerNo" value="" placeholder="输入身份证号" />
				</view>
			</view>
			<view class="inboxe">
				<view class="">身份证有效期</view>
				<view>
					<checkbox-group @change="checkboxChange2" style="display:inline;">
						<checkbox v-model="state2"></checkbox>
					</checkbox-group>长期
				</view>
			</view>
			<view class="inboxr" style="margin-bottom: 25rpx;">
				<view style="margin-right: 8rpx;">
					<uni-datetime-picker placeholder="开始日期" border="false" @change="timestampChange" />
				</view>
				<view style="margin-left: 8rpx;">
					<uni-datetime-picker placeholder="结束日期" border="false" @change="timestampChange2" />
				</view>
			</view>
			<view>
				<form>
					<view class="cu-bar bg-white margin-top">
						<view class="">
							身份证信息面
						</view>
						<view class="action">
							{{imgList.length}}/1
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
								:data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>

					<view class="cu-bar bg-white margin-top">
						<view class="">
							身份证国徽面
						</view>
						<view class="action">
							{{imgList2.length}}/1
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList2" :key="index" @tap="ViewImage2"
								:data-url="imgList2[index]">
								<image :src="imgList2[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage2" v-if="imgList2.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</form>
			</view>
		</view>
		<view class="inbox2">
			<view class="inboxs dx">
				<view class="iptt">手机号码</view>
				<view class="ipts">
					<input class="srkk" type="text" maxlength="11" v-model="mobile" value="" placeholder="输入银行预留手机"
						style="" @blur="verify" />
				</view>
				<view class="">
					<button type="button" :class="class2" @click="getOpenCode" :disabled="disabled">{{title}}</button>
				</view>
			</view>
			<view class="inbox">
				<view class="ipt">验证码</view>
				<view class="ipt">
					<input class="srk" type="text" v-model="messageCode" maxlength="6" value="" placeholder="请输入验证码" />
				</view>
			</view>
		</view>
		<view class="yhxy">
			<checkbox-group @change="checkboxChange" style="display:inline;">
				<checkbox v-model="state"></checkbox>
			</checkbox-group>
			<text>我已阅读并同意</text>
			<navigator url="../protocol/wuhan" style="display:inline;">《武汉众邦银行E账通平台子账户服务协议》</navigator>
		</view>
		<view class="">
			<button type="button" class="btn" @click="submit">提交申请</button>
		</view>
		<view v-if="open==1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#008040;font-size:20px;"></i>
						<!-- <i-icon size="20upx" color="#008040" name="add-circle-fill" class="r10"></i-icon> -->
						添加分类
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:20px;" @click="open=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="open=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz">交易密码</view>
						<view class="nr"><input type="password" v-model="password"></view>
					</view>
					<view class="li bc">
						<view class="wz">确认交易密码</view>
						<view class="nr"><input type="password" v-model="passwords"></view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="addTwoData()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确认
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var $_token;
	export default {
		data() {
			return {
				userName: '',
				cerNo: '',
				bankAccName: '',
				mobile: '',
				messageCode: '',
				acctNo: '',
				disabled: false,
				open:0,
				class2: 'btns2',
				timer: 60,
				title: '获取验证码',
				password:'',
				passwords:'',
				state: false,
				state2: false,
				array: ['选择开户银行', '中国银行', '中信银行', '中国建设银行', '中国工商银行', '中国农业银行', '中国邮政储蓄银行', '中国人民银行', '中国交通银行', '招商银行',
					'民生银行', '浦东银行', '兴业银行', '华夏银行', '光大银行', '广发银行', '国开行', '农发行', '进出口行'
				],
				bankName: '',
				cerStartDate: '',
				cerEndDate: '',
				imgList: [],
				imgList2: [],
				certFrontUrl: '',
				certBackUrl: '',
				index: 0,
			}
		},
		onLoad() {
			$_token = uni.getStorageSync('token');
			if (!$_token) {
				uni.showToast({
					title: '用户未登录',
					icon: 'none'
				});
				return;
			} else {
				this.gracc = true;
			}

		},
		methods: {

			ChooseImage() { //身份证信息面
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: this.heguiURL + '/com/upload?fileType=certBack',
							header: {
								'token': $_token
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: function(uploadFileRes) {
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									console.log(fileData.data.fileId);
									_this.certFrontUrl = fileData.data.fileId; //给地址赋值
									//this.imgList = [...this.imgList, uploadFileRes.data]
								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList = [];
								}
							},
							fail: function(err) {
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImage2() { //身份证国徽面
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['camera'], //从相册选择
					success: (res) => {
						if (this.imgList2.length != 0) {
							this.imgList2 = this.imgList2.concat(res.tempFilePaths)
						} else {
							this.imgList2 = res.tempFilePaths
						}
						const tempFilePaths = res.tempFilePaths;
						const uploadTask2 = uni.uploadFile({
							url: this.heguiURL + '/com/upload?fileType=certFront',
							header: {
								'token': $_token
							},
							filePath: tempFilePaths[0],
							name: 'file',

							success: function(uploadFileRes) {
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									console.log(fileData.data.fileId);
									_this.certBackUrl = fileData.data.fileId
									//this.imgList = [...this.imgList, uploadFileRes.data]
								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList2 = [];
								}
							},
							fail: function(err) {
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			ViewImage2(e) {
				uni.previewImage({
					urls: this.imgList2,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg2(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList2.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},

			//时间选择器
			timestampChange: function(c) {
				console.log(c)
				this.cerStartDate = c;

			},
			timestampChange2: function(c) {
				console.log(c)
				this.cerEndDate = c;
			},
			//验证码校验
			verify() {
				if (this.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}

				if (this.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				if (this.cerNo == '') {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				if (this.acctNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				if (this.mobile == '' || this.mobile.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				this.class2 = 'btns';
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let arrid = e.target.value;
				console.log('选择到的值是：', this.array[arrid])
				this.bankName = this.array[arrid];
				this.index = arrid;
				console.log('bankName的当前值为:' + this.bankName)
			},

			checkboxChange(e) {
				this.state = !this.state;
				console.log(this.state);
			},
			checkboxChange2(e) {
				this.state2 = !this.state2;

				if (this.state2 == true) {
					this.cerEndDate = '长期';
					console.log(this.cerEndDate)
				}
				console.log(this.state2);
			},

			//获取验证码
			getOpenCode() {
				this.userName = this.bankAccName;
				let userName = this.userName;
				let cerNo = this.cerNo;
				let phone = this.mobile;
				let acctNo = this.acctNo;
				let reqdata = JSON.stringify({
					'mobile': phone,
					'cerNo': cerNo,
					'userName': userName,
					'acctNo': acctNo
				});

				if (this.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (this.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.cerNo == '') {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.acctNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (phone == '' || phone.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (this.timer == 60) {
					this.disabled = true

					let timer1 = setInterval(() => {
						this.timer--;
						this.title = this.timer + '秒后重试'
						if (this.timer == 0) {
							clearInterval(timer1);
							this.timer = 60;
							this.disabled = false
							this.title = '获取验证码'
							return;
						}
					}, 1000);
				}
				uni.request({
					url: this.heguiURL + '/gr/get/code?mobile=' + phone + '&cerNo=' + cerNo + '&userName=' +
						userName + '&acctNo=' + acctNo,
					method: 'POST',
					//data:reqdata,
					header: {
						'token': $_token
					},
					dataType: 'json',
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							uni.showToast({
								title: '发送成功',
								duration: 2000
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},


			/**
			 * 提交开户申请
			 */
			submit() {
				let tttdata = this.$data;
				this.userName = tttdata.bankAccName;
				console.log(tttdata);
				this.open = 1;
				if (this.state == false) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return;
				}
				if (this.index == 0) {
					uni.showToast({
						title: '请选择开户行',
						icon: 'none'
					})
					return;
				}
				if (this.userName == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.cerNo == '') {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.acctNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.mobile == '') {
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.messageCode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.request({
					url: this.heguiURL + '/gr/add/gr',
					method: 'POST',
					data: {
						'userName': tttdata.userName,
						'acctNo': tttdata.acctNo,
						'bankAccName': tttdata.bankAccName,
						'mobile': tttdata.mobile,
						'cerNo': tttdata.cerNo,
						'bankName': tttdata.bankName,
						'messageCode': tttdata.messageCode,
						'cerStartDate': tttdata.cerStartDate,
						'cerEndDate': tttdata.cerEndDate,
						'certFrontUrl': tttdata.certFrontUrl,
						'certBackUrl': tttdata.certBackUrl
					},
					header: {
						'token': $_token
					},
					dataType: 'json',
					success: (res) => {
						console.log(res);
						if (res.data.success == true) {
							uni.showToast({
								title: '提交成功，请设置交易密码',
								duration: 3000
							})
							uni.reLaunch({
								url: 'pay-pass?acctNo=' + tttdata.acctNo + '&messageCode=' + tttdata
									.messageCode
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			
			/**
			 * 填完交易密码开始开户
			 */
			submit() {
				if (this.password == '' || this.password == null) {
					uni.showToast({
						title: '请输入交易密码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.passwords == '' || this.passwords == null) {
					uni.showToast({
						title: '请确认您的交易密码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.password != this.passwords) {
					uni.showToast({
						title: '两次密码不相同',
						icon: 'none',
						duration: 2000
					})
					return;
				}
			
				uni.request({
					url: this.heguiURL + '/gr/open/gr?acctNo=' + this.acctNo + '&password=' + this.password +
						'&code=' + this.messageCode,
					method: 'POST',
					header: {
						'token': $_token
					},
					dataType: 'json',
					success: (res) => {
						console.log(res);
						if (res.data.success == true) {
							uni.showToast({
								title: '提交成功，审核预计五分钟',
								duration: 3000
							})
							uni.reLaunch({
								url: '../index/index'
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			}
			
		}
	}
</script>

<style>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css";

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	page {
		font-size: 14px;
		background-color: #F5F5F5;
	}

	.p-line {
		display: inline-flex;
		align-items: center;
	}

	input {
		margin-left: 10px;
		border: none;
	}

	.inboxs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dx {
		border-bottom: 0.5rpx solid #eee;
	}

	.inboxr {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.inboxe {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 110rpx;
		height: 110rpx;
	}

	.inbox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.inbox2 {
		margin-bottom: 30rpx;
		padding: 20rpx 50rpx 20rpx 50rpx;
		background-color: #FFFFFF;
	}

	.ipt {
		display: inline-block;
		height: 120rpx;
		line-height: 120rpx;
		width: 150rpx;

	}

	.iptt {
		display: inline-block;
		height: 120rpx;
		line-height: 120rpx;
		margin: 0;
		width: 150rpx;
	}

	.srk {
		display: inline-block;
		height: 120rpx;
		line-height: 120rpx;
		margin: 0;
		width: 380rpx;
		font-size: 30rpx;
	}

	.codebtn {
		height: 100rpx;
		width: 80px;
		margin: 8px;
		background-color: #004E3C;
		color: #FFFFFF;
	}

	.codebtn:active {
		background-color: #189F92;
	}

	.btns {
		background-color: #004E3C;
		color: #FFFFFF;
		height: 70rpx;
		line-height: 70rpx;
		width: 180rpx;
		font-size: 24rpx;
		border-radius: 35rpx;
		margin-right: 10px;
	}

	.btns2 {
		background-color: #666666;
		color: #FFFFFF;
		height: 70rpx;
		line-height: 70rpx;
		width: 180rpx;
		font-size: 24rpx;
		border-radius: 35rpx;
		margin-right: 10px;
	}

	.btn {
		background-color: #004E3C;
		color: #FFFFFF;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		margin: 0rpx 30rpx 40rpx 30rpx;
	}

	.btn:active {
		background-color: #189F92;
	}

	.msg {
		color: red;
		font-size: 10px;
		margin-left: 8px;
	}

	.yhxy {
		margin: 40rpx 30rpx 40rpx 30rpx;
	}
</style>
